<html>


<head>
    <!-- 引入 layui.css -->
    <link href="//unpkg.com/layui@2.11.0/dist/css/layui.css" rel="stylesheet">
    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.11.0/dist/layui.js"></script>
</head>

<body>

<table class="layui-hide" id="ID-table-demo-editable">

</table>

<script type="text/html" id="toolEventDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script>
    layui.use(function () {
        var table = layui.table;
        var util = layui.util;
// 根据返回数据中某个字段来判断开启该行的编辑
        var editable = function (d) {
            if (d.editable) return 'text'; // 这里假设以 editable 字段为判断依据
        };
// 创建表格实例
        table.render({
            elem: '#ID-table-demo-editable',
            url: '/list', // 此处为静态模拟数据，实际使用时需换成真实接口
            // page: true,
//,editTrigger: 'dblclick' // 触发编辑的事件类型（默认 click ）。 v2.7.0 新增，之前版本固定为单击触发
            css: [
// 对开启了编辑的单元格追加样式
                '.layui-table-view td[data-edit]{color: #16B777;}'
            ].join(''),
            cols: [[
                {field: 'id', title: 'ID', sort: true, fixed: true},
                {field: 'name', title: '用户名', edit: editable},
                {field: 'age', title: '年龄', edit: editable},
                {field: 'gender', title: '性别', sort: true, edit: editable},
                {title: '操作', templet: '#toolEventDemo'},
            ]]
            // height: 310
        });
// 单元格编辑后的事件
        table.on('edit(ID-table-demo-editable)', function (obj) {
            var field = obj.field; // 得到修改的字段
            var value = obj.value // 得到修改后的值
            var oldValue = obj.oldValue // 得到修改前的值 -- v2.8.0 新增
            var data = obj.data // 得到所在行所有键值
            var col = obj.getCol(); // 得到当前列的表头配置属性 -- v2.8.0 新增

// 值的校验
            if (value.replace(/\s/g, '') === '') {
                layer.tips('值不能为空', this, {tips: 1});
                return obj.reedit(); // 重新编辑 -- v2.8.0 新增
            }
// 编辑后续操作，如提交更新请求，以完成真实的数据更新
// …

// 显示 - 仅用于演示
            layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改值为：' + util.escape(value));
        });


        // 单元格工具事件
        table.on('tool(ID-table-demo-editable)', function (obj) {
            var data = obj.data; // 得到当前行数据
            var dataCache = obj.dataCache; // 得到当前行缓存数据，包含特定字段 --- 2.8.8+
            var index = obj.index; // 得到当前行索引
            var layEvent = obj.event; // 获得元素对应的 lay-event 属性值
            var tr = obj.tr; // 得到当前行 <tr> 元素的 jQuery 对象
            var options = obj.config; // 获取当前表格基础属性选项
            var col = obj.getCol(); // 得到当前列的表头配置属性 -- v2.8.3 新增
            console.log(obj); // 查看对象所有成员

            // 根据 lay-event 的值执行不同操作
            switch (layEvent) {
                case 'edit':
                    var $ = layui.jquery;
                    $.ajax({
                        url: '/edit',
                        type: 'POST',
                        contentType: 'application/json',
                        data: JSON.stringify(data),
                        success: function (res) {
                            console.log('success', res)
                            if (res.code === 200) {
                                layer.alert('ok', {title: '编辑成功'});
                            } else {
                                let msg = res.msg;
                                layer.alert(msg, {title: '操作失败'});
                            }
                        },
                        error: function (err) {
                            console.log('error', err)
                        }
                    });
                    break;
                case 'del':
                    layer.confirm('确定删除吗？', function (index) {
                        obj.del(); // 删除对应行（tr）的 DOM 结构，并更新缓存
                        layer.close(index);

                        // 向后端发送删除请求，执行完毕后，可通过 reloadData 方法完成数据重载
                        /*
                        table.reloadData(id, {
                          scrollPos: 'fixed'  // 保持滚动条位置不变 - v2.7.3 新增
                        });
                        */
                    });
                    break;
            }
        });


    });
</script>
</body>
</html>